//
// List groups
// --------------------------------------------------


// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.

.list-group-item {
	&:first-child {
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
	}
	&:last-child {
		border-bottom-right-radius: 2px;
		border-bottom-left-radius: 2px;
	}
	&.active,
	&.active:hover,
	&.active:focus {
		background-color: @primary;
		color: @white;
		border-color: @primary;
	}
}
// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

.list-group-item-variant(success; @success; @success);
.list-group-item-variant(info; @info; @info);
.list-group-item-variant(warning; @warning; @warning);
.list-group-item-variant(danger; @danger; @danger);

// List Groups

.list-group-item-variant(@state; @background; @color) {
	.list-group-item-@{state} {
		color: darken(@color, 20%);
		background-color: lighten(@background, 40%);
		border-color: lighten(@background, 40%);
		a&,
		button& {
			color: darken(@color, 20%);
			&:hover,
			&:focus {
				color: darken(@color, 20%);
				background-color: @background;
			}
			&.active,
			&.active:hover,
			&.active:focus {
				background-color: lighten(@background, 20%);
				border-color: lighten(@background, 20%);
			}
		}
	}
}